.fly-in {
    animation-name: flyIn;
    animation-duration: 500ms;
    animation-timing-function: ease-out;
}

.fly-out {
    animation-name: flyOut;
    animation-duration: 500ms;
    animation-timing-function: ease-in;
}

@keyframes flyIn {
    from {
        opacity: 0;
        transform: translateY(-3000px);
    }

    to {
        opacity: 1;
        transform: translateY(1px);
    }
}

@keyframes flyOut {
    from {
        opacity: 1;
        transform: translateY(1px);
    }

    to {
        opacity: 0;
        transform: translateY(-3000px);
    }
}

.fade-in {
    opacity: 0;
    height: 0;
    width: 0;
    animation-name: fadeIn;
    animation-duration: 500ms;
    animation-timing-function: ease-out;
}

.fade-out{
    opacity: 1;
    height: 1000px;
    width: 1000px;
    animation-name: fadeIn;
    animation-duration: 500ms;
    animation-timing-function: ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 1;
        height: 1000px;
        width: 1000px;
    }
    to {
        opacity: 0.5;
        height: 0;
        width: 0;
    }
}

@keyframes fadeOut {
    from {
        opacity: 0.5;
        height: 0;
        width: 0;
    }
    to {
        opacity: 1;
        height: 1000px;
        width: 1000px;
    }
}